<template>
    <div class="content">
        <div class="xuanXiang">
            请设置人数
            <button @click="selectNum(num+1)" v-for="num in 5" :key="num">{{num+1}}人</button>
        </div>

        <h2 style="text-align: center">最终结果：{{msg}}</h2>
        <button style="text-align: center;align-self: center" @click="endGame()">得出结果</button>
        <div class="playerBox">
            <div class="box" v-for="(player,i) in playerPoints" :key="i">
                <div class="dice" v-for="(number,j) in player" :key="j">
                    <div class="dice-row">
                        <span class="dots-hide"
                              :class="{'dots':number==2 ||number==3 ||number==4 ||number==5 ||number==6}"/>
                        <span class="dots-hide"/>
                        <span class="dots-hide"
                              :class="{'dots':number==4 ||number==5 ||number==6}"/>
                    </div>
                    <div class="dice-row">
                        <span class="dots-hide" :class="{'dots':number==6}"/>
                        <span class="dots-hide"
                              :class="{'dots':number==1 ||number==3 ||number==5}"/>
                        <span class="dots-hide" :class="{'dots':number==6}"/>
                    </div>
                    <div class="dice-row">
                        <span class="dots-hide"
                              :class="{'dots':number==4 ||number==5 ||number==6}"/>
                        <span class="dots-hide"/>
                        <span class="dots-hide"
                              :class="{'dots':number==2 ||number==3 ||number==4 ||number==5 ||number==6}"/>
                    </div>
                </div>
                <!--                <Dice :current.sync="playerPoints[player-1][index-1]" v-for="index in 5" :key="index"/>-->
                <button class="shake" @click="shake(i)">摇一摇</button>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: 'HelloWorld',
        data() {
            return {
                playerNum: 2,
                dots: [],
                playerPoints: [],//用来判断哪个筛子的点数
                player: [],//玩家结果集
                playerScore: [],//存放牛几
                show: false,
                msg: '结果是：',//结果
            }
        },
        props: {},
        methods: {
            selectNum(num) {
                this.playerNum = num
                this.player = []
                this.playerPoints = []
                for (let i = 0; i < this.playerNum; i++) {
                    this.player.push({
                        isHave: false,//判断有没有牛
                        whatBow: 0,//判断牛几
                        isFiveBoom: false,
                        fiveBoom: 0,
                        isFiveSmallBow: false,
                        fiveSmallBow: 0,
                        fourBoom: 0,
                        isFourBoom: false,
                        points: 0
                    })
                    this.playerScore.push([0, 0])
                }
                for (let j = 0; j < this.playerNum; j++) {
                    this.playerPoints.push([1, 1, 1, 1, 1])
                }
            },
            shake(player) {
                console.log(this.player[player])
                var newArray = [
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1)]
                console.log("随机数" + newArray)
                this.$set(this.playerPoints, player, newArray);
                console.log("生成随机数之后的完整数组:", this.playerPoints)
                //判断有无牛
                if (this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][2] == 6 || this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][2] == 12 || this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][2] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][3]
                    this.playerScore[player][1] = this.playerPoints[player][4]
                    console.log("---------------1")
                } else if (this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][3] == 6 || this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][3] == 12 || this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][3] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][2]
                    this.playerScore[player][1] = this.playerPoints[player][4]
                    console.log("---------------2")
                } else if (this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][4] == 6 || this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][4] == 12 || this.playerPoints[player][0] + this.playerPoints[player][1] + this.playerPoints[player][4] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][2]
                    this.playerScore[player][1] = this.playerPoints[player][3]
                    console.log("---------------3")
                } else if (this.playerPoints[player][0] + this.playerPoints[player][3] + this.playerPoints[player][4] == 6 || this.playerPoints[player][0] + this.playerPoints[player][3] + this.playerPoints[player][4] == 12 || this.playerPoints[player][0] + this.playerPoints[player][3] + this.playerPoints[player][4] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][2]
                    this.playerScore[player][1] = this.playerPoints[player][1]
                    console.log("---------------4")
                } else if (this.playerPoints[player][0] + this.playerPoints[player][3] + this.playerPoints[player][2] == 6 || this.playerPoints[player][0] + this.playerPoints[player][3] + this.playerPoints[player][2] == 12 || this.playerPoints[player][0] + this.playerPoints[player][3] + this.playerPoints[player][2] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][1]
                    this.playerScore[player][1] = this.playerPoints[player][4]
                    console.log("---------------5")
                } else if (this.playerPoints[player][0] + this.playerPoints[player][2] + this.playerPoints[player][4] == 6 || this.playerPoints[player][0] + this.playerPoints[player][2] + this.playerPoints[player][4] == 12 || this.playerPoints[player][0] + this.playerPoints[player][2] + this.playerPoints[player][4] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][1]
                    this.playerScore[player][1] = this.playerPoints[player][3]

                    console.log("---------------6")
                } else if (this.playerPoints[player][1] + this.playerPoints[player][2] + this.playerPoints[player][4] == 6 || this.playerPoints[player][1] + this.playerPoints[player][2] + this.playerPoints[player][4] == 12 || this.playerPoints[player][1] + this.playerPoints[player][2] + this.playerPoints[player][4] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][0]
                    this.playerScore[player][1] = this.playerPoints[player][3]
                    console.log("---------------7")
                } else if (this.playerPoints[player][2] + this.playerPoints[player][3] + this.playerPoints[player][4] == 6 || this.playerPoints[player][2] + this.playerPoints[player][3] + this.playerPoints[player][4] == 12 || this.playerPoints[player][2] + this.playerPoints[player][3] + this.playerPoints[player][4] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][1]
                    this.playerScore[player][1] = this.playerPoints[player][0]
                    console.log("---------------8")
                } else if (this.playerPoints[player][1] + this.playerPoints[player][2] + this.playerPoints[player][3] == 6 || this.playerPoints[player][1] + this.playerPoints[player][2] + this.playerPoints[player][3] == 12 || this.playerPoints[player][1] + this.playerPoints[player][2] + this.playerPoints[player][3] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][0]
                    this.playerScore[player][1] = this.playerPoints[player][4]
                    console.log("---------------9")
                } else if (this.playerPoints[player][1] + this.playerPoints[player][3] + this.playerPoints[player][4] == 6 || this.playerPoints[player][1] + this.playerPoints[player][3] + this.playerPoints[player][4] == 12 || this.playerPoints[player][1] + this.playerPoints[player][3] + this.playerPoints[player][4] == 18) {
                    this.isHave = true
                    this.playerScore[player][0] = this.playerPoints[player][0]
                    this.playerScore[player][1] = this.playerPoints[player][2]
                    console.log("---------------10")
                }
                console.log(this.playerScore[player])

                if ((this.playerScore[player][0] + this.playerScore[player][1])>6&&(this.playerScore[player][0] + this.playerScore[player][1])!=12){
                    this.player[player].whatBow = (this.playerScore[player][0] + this.playerScore[player][1]) % 6
                }else if ((this.playerScore[player][0] + this.playerScore[player][1])==12){
                    this.player[player].whatBow =6
                }else {
                    this.player[player].whatBow = this.playerScore[player][0] + this.playerScore[player][1]
                }
                console.log("玩家" + (player + 1) + "牛几：" + this.player[player].whatBow + "||" + (this.playerScore[player][0] + this.playerScore[player][1]) % 6 + "||" + this.playerScore[player][0] + "--" + this.playerScore[player][1])
                // this.quChong(this.playerPoints[player], this.playerPoints[player], this.player[player])
                this.quChong(player, this.player[player])
            },
            quChong(num, player) {
                var arr = this.playerPoints[num].concat()
                var arr1 = this.playerPoints[num].concat()


                for (var i = 0, len = arr.length; i < len; i++) {
                    // eslint-disable-next-line no-redeclare
                    for (var j = i + 1, len = arr.length; j < len; j++) {
                        if (arr[i] === arr[j]) {
                            player.fourBoom = arr[i]
                            arr.splice(j, 1);
                            j--;        // 每删除一个数j的值就减1
                            len--;      // j值减小时len也要相应减1（减少循环次数，节省性能）
                            // console.log(j,len)
                        }
                    }
                }
                console.log("数组长度" + arr.length)
                if (arr.length == 1) {
                    player.fiveBoom = arr[0]
                } else if ((arr1[0] + arr1[1] + arr1[2] + arr1[3] + arr1[4]) == 6) {
                    player.isFiveSmallBow = true
                    player.fiveSmallBow = 1
                } else if (arr.length != 2) {
                    player.isFourBoom = false
                    player.fourBoom = 0
                }
                if (player.isFourBoom != true) {
                    player.fourBoom = 0
                }
            },
            endGame() {
                var player = this.player
                var map = new Map()
                var arr = new Array()
                for (let i = 0; i < this.playerNum; i++) {
                    player[i].points = player[i].whatBow + player[i].fourBoom + player[i].fiveSmallBow + player[i].fiveBoom
                    console.log("玩家" + (i + 1) + "的得分为：" + player[i].points + "||" + player[i].whatBow + "--" + player[i].fourBoom + "--" + player[i].fiveSmallBow + "--" + player[i].fiveBoom)
                    map.set(player[i].points, "玩家" + (i + 1))
                    arr.push(player[i].points)
                }
                arr.sort(this.compare)
                console.log("这是得分排序："+arr)
                this.msg = map.get(arr[0])+"获胜！！"
                if (arr[0] == arr[1]) {
                    this.msg = "平局"
                }
                console.log(this.msg + "这是最高分")
            },
            compare(x, y) {//比较函数
                if (x > y) {
                    return -1;
                } else if (x < y) {
                    return 1;
                } else {
                    return 0;
                }
            }

        },
        components: {},

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .playerBox {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .xuanXiang {
        align-self: center;
    }

    .box {
        align-self: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 400px;
        width: 400px;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
    }

    .shake {
        flex-basis: 100%;
        font-size: 30px;
        background-color: palegreen;
        border-style: solid;
        border-width: 3px;
    }

    .dice {
        flex-direction: column;
        align-self: center;
        height: 100px;
        width: 100px;
        border-style: solid;
        border-width: 2px;
        border-radius: 5px;
        display: flex;
        background-color: white;
        justify-content: space-around;
    }

    .dice-row {
        flex-direction: row;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .dots-hide.dots {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background-color: black;
        align-self: center;
    }

    .dots-hide {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background-color: white;
        align-self: center;
    }


</style>
